<template>
  <view class="container">
    <!-- 顶部导航栏 -->
    <!-- 奖励信息区域 -->
    <view class="reward-info">
	  <view>
	  <view class="reward-label">当前等级：{{userInfo.member==1?'钓者':userInfo.member==2?'VIP钓师':userInfo.member>=3?'SVIP钓宗':'钓者'}}</view>	  
      <view class="reward-label">累积邀请总奖励（元）</view>
      <view class="reward-amount">0</view>
	  </view>
	  <u-button  @click="withdraw" color="#000000">去提取</u-button>
    </view>
	<view style="background-color: #fff;font-size: 26rpx;padding: 20rpx;border-radius: 20rpx;margin-bottom: 20rpx;">
		<!-- <textarea v-model="explain"></textarea> -->
		<u--textarea disabled border="none" v-model="explain" placeholder="请输入内容" autoHeight maxlength="-1"></u--textarea>
	</view>
    <!-- 已邀请达人区域 -->
    <scroll-view scroll-y @scrolltolower="scrolltolower" class="invited-section">
		<view style="padding: 20rpx;">
      <view class="invited-label">已邀请达人 ({{invitedList.length || 0}})</view>
      <view v-if="invitedList.length > 0">
        <view v-for="(item, index) in invitedList" :key="index" class="invited-item">
          <!-- 这里假设达人信息有头像和名称，实际需根据接口返回调整 -->
		  <view style="display: flex;align-items: center;">
          <image :src="item.avatarUrl" class="invited-avatar"></image>
          <view class="invited-name">{{item.nickName}}</view>
		  </view>
		  
        </view>
      </view>
      <u-empty
	  v-else 
              mode="list"
			  text="暂无邀请"
              
      >
      </u-empty>
	  </view>
    </scroll-view>
    <!-- 邀请更多达人按钮 -->
    <u-button open-type="share"  size="large" shape="circle" color="#ffd600">邀请更多达人</u-button>
  </view>
</template>

<script>
import { mapState,mapMutations} from 'vuex';	
export default {
  data() {
    return {
	  explain:'',
      invitedList: [] ,// 这里先初始化为空数组，实际应从接口获取已邀请达人列表
	  formdata:{
		  page:1,
		  pageSize:10,
	  }
    };
  },
  computed:{
     ...mapState(['isLogin','userInfo']),
  },
  onShareAppMessage (shareOption) {
    return {
      path: `/pages/index/index?ivcode=${this.userInfo.ivcode}`, // ?后面的参数会在转发页面打开时传入onLoad方法
      templateId: '7ahec2d1afc22e429l',
      title:'您身边的钓点变现神器！',
      success: ()=> {
        console.log('分享成功')
      },
      fail (e) {
        console.log('分享面板调起失败', e);
      }
    }
  },
  onLoad() {
	  this.getExplain()
	  this.getmylist()
  },
  methods: {
	async getExplain(){
	  const {data:res} = await this.$http.post('/nav/getExplain',{})
	  if(res.errCode==200){
		  this.explain = res.data.explain
	  }
	},
	async getmylist(){
		const {data:res} = await this.$http.post('/nav/getmylist',this.formdata)
		if(res.errCode==200){
			this.invitedList = [...this.invitedList,...res.data]
		}
	},
	scrolltolower(){
		this.formdata.page++
		this.getmylist()
	},
    goBack() {
      // 返回上一页逻辑
      uni.navigateBack();
    },
    moreOptions() {
      // 更多选项功能逻辑
      uni.showToast({
        title: '更多选项功能暂未实现',
        icon: 'none'
      });
    },
    closePage() {
      // 关闭页面逻辑
      uni.navigateBack();
    },
    withdraw() {
      // 提取奖励逻辑
      uni.navigateTo({
      	url:'/pages/gotixian/gotixian'
      })
    },
    inviteMore() {
      // 邀请更多达人逻辑
      uni.showToast({
        title: '邀请更多达人功能暂未实现',
        icon: 'none'
      });
    }
  }
};
</script>

<style lang="scss">
.container {
  background: linear-gradient(to bottom, #ffd600, #ffffff);
  padding: 20rpx;
  height: 100%;
  
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}
.back-icon {
  margin-right: 10rpx;
}
.title {
  font-size: 32rpx;
  font-weight: bold;
}
.header-right {
  display: flex;
  align-items: center;
}
.feedback {
  font-size: 28rpx;
  margin-right: 20rpx;
}
.more-dots {
  font-size: 28rpx;
  margin-right: 20rpx;
}
.close {
  font-size: 32rpx;
}
.reward-info {
  background-color: #ffffff;
  padding: 20rpx;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.reward-label {
  font-size: 28rpx;
}
.reward-amount {
  font-size: 40rpx;
  font-weight: bold;
}
.withdraw-btn {
  background-color: #000000;
  color: #ffffff;
  padding: 10rpx 30rpx;
  border-radius: 20rpx;
  font-size: 28rpx;
}
.invited-section {
  background-color: #ffffff;
  height: 42vh;
  border-radius: 10rpx;
  margin-bottom: 20rpx;
}
.invited-label {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}
.invited-item {
  display: flex;
  align-items: center;
  margin-bottom: 10rpx;
}
.invited-avatar {
  width: 40rpx;
  height: 40rpx;
  border-radius: 20rpx;
  margin-right: 10rpx;
}
.invited-name {
  font-size: 28rpx;
}
.no-data {
  font-size: 28rpx;
  color: #999999;
}
.invite-more-btn {
  background-color: #ffd600;
  color: #000000;
  padding: 15rpx;
  border-radius: 30rpx;
  font-size: 32rpx;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.invite-more-btn view {
  margin-right: 10rpx;
}
</style>
